<template>
  <div>
    <el-form ref="formRef" :model="formData" :rules="formRule" label-width="120px" style="max-width: 1000px;">
      <el-form-item label="商品分类" prop="classificationSid" v-if="type === 1">
        <el-select v-model="formData.classificationSid" placeholder="请选择商品分类" clearable  style="width: 300px">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.classificationSid" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="商品标题" prop="name">
        <el-input v-model.trim="formData.name" clearable placeholder="请输入商品标题" />
      </el-form-item>
      <el-form-item label="规格" prop="specifications">
        <el-input v-model.trim="formData.specifications" clearable placeholder="请输入规格" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="formData.price" clearable placeholder="请输入商品价格" oninput="value=value.replace(/[^\d.]/g,'')" style="width: 300px">
          <template #prepend>￥</template>
        </el-input>
      </el-form-item>
      <el-form-item label="运费" prop="freight">
        <el-input v-model.trim="formData.freight" clearable placeholder="请输入运费" oninput="value=value.replace(/[^\d.]/g,'')" style="width: 300px">
          <template #prepend>￥</template>
        </el-input>
      </el-form-item>
      <el-form-item label="库存" prop="inventory">
        <el-input v-model.trim="formData.inventory" clearable placeholder="请输入库存" oninput="value=value.replace(/[^\d]/g,'')" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="主图" prop="mainImage">
        <File-upload ref="mainImageRef" v-model="formData.mainImage" :fileSize="50" :limit="1" modelValueType="Object" :fileType="['png', 'jpg', 'jpeg']" listType="picture-card" :img-size="type == 0 ?'333px*268px':'172px*172px'"></File-upload>
      </el-form-item>
      <el-form-item label="商品状态" prop="productStatus">
        <el-radio-group v-model="formData.productStatus">
          <el-radio :value="1">已上架</el-radio>
          <el-radio :value="2">待上架</el-radio>
          <el-radio :value="3">已下架</el-radio>
          <el-radio :value="4">已售罄</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, watch} from "vue"
import { useRouter } from "vue-router"
import FileUpload from "@components/FileUpload.vue"
const router = useRouter()
const { proxy } = getCurrentInstance()

const props = defineProps({
  type: {
    type: Number,
    default: 1,
  },
  detail:{
    type: Object,
    default: {},
  }
})
const formRef = ref(null);
const formData = reactive({
  // bannerImage:'',
  classificationSid:'',
  // content:'ssssssss',
  // detailImage:'',
  freight:'',
  inventory:'',
  mainImage:'',
  name:'',
  price:'',
  productStatus:2,
  specifications:'',
  status:0,
})

watch(() => props.detail, val => {
  if (val) {
    for (let key in formData){
      formData[key] = props.detail[key];
    }
  } else {

  }
},{ deep: true, immediate: true });

onMounted(() => {
  getClass()
})

const formRule = reactive({
  classificationSid: [{ required: true, message: "请选择分类", trigger: "change" }],
  name: [{ required: true, message: "请输入标题", trigger: "blur" }],
  mainImage: [{ required: true, message: "请选择主图", trigger: "blur" }],
  price: [{required: true, message: "请输入价格", trigger: "blur"},{validator:proxy.$util.validNumOrPoint,trigger: "blur"}],
  freight: [{required: true, message: "请输入运费", trigger: "blur"},{validator:proxy.$util.validNumOrPoint,trigger: "blur"}],
  inventory: [{required: true, message: "请输入库存", trigger: "blur"}],
})
const selectOptions = reactive({
  classificationSid:[],
})
// 获取分类
function getClass() {
  proxy.$axios
      .get("classification")
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          selectOptions.classificationSid = result.records.map(v=>{
            return {
              label: v.name,
              value: v.sid
            }
          })
        } else {
          proxy.$message({ message: res.data.msg, type: "error" })
        }
      })
      .catch((err) => {})
}

const submit = async () => {
  let flag = false;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      flag = true
    }
  })
  if(flag){
    let integerKeys = ['freight','inventory','price'];
    let data = JSON.parse(JSON.stringify(formData));
    for (let key in data){
      if(integerKeys.includes(key) && data[key]){
        data[key] = Number(data[key]);
      }
    }
    return data;
  }else{
    return false;
  }
}
defineExpose({
  submit
})
</script>

<style lang="less" scoped>

</style>
